<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图位置</title>
    <script type='text/javascript' src='./lib/jsmap/jsmap_light.js'></script>
    <link type="text/css" href="./lib/jsmap/jsmap_light.css" rel="stylesheet"/>
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</head>
<body>
<div id="mapContainer">
    <div id="id_tip" class="tip">
        <span class="tip-content">jpg地图缺失，请联系实施工程师</span>
    </div>
</div>
</body>


</html>

<script>



    var domTitleShowFlag = true;

    var imageMarkList = [];

    var polygonMarkerList = [];//风险分区的marker列表

    var chosenDeptId;

    var chosenMapType = 0;

    var chosenJobIds;

    var chosenStatus = [1,3,5,2,4];// 人 车 风险区域等等

    var chosenRealTrackSn;//实时跟踪的sn号

    let icon = ""

    let maxFloors = 5;

    let drawTool;
    let currentDrawMode;

    var currentFloorId = -99;

    var singlePoint = null;
    var singleResult = null;

    var pointList = [];
    var pointListResult = [];

    var mapConfig = {};

    var markerAdded;
    var lineMarkerAdded;
    var boxMarkerAdded;
    var circleMarkerAdded;

    // 0 刚进来 1 开始画了 2 结束了也就是画好了 3 查看进来 也就是画好了 但是只显示重画
    var status = 0;

    var markWay;

    var buildId = getQueryString("buildId");
    var hideZoom = getQueryString("hideZoom") || false;
    var hideFloorControl = getQueryString("hideFloorControl") || false;
    let pointsParamsStr = getQueryString("pointList");


    var mapServer = getQueryString("mapServer");
    if (getQueryString('mapConfig')) {
        var mapConfig = JSON.parse(getQueryString('mapConfig'))
    }
    fetchJson();


    var map = new jsmaplight.JSMap({
        container: 'mapContainer',
        mapServerURL: mapServer,
        showLoading: false,
        mapScaleLevelRange: [15, 24], // 比例尺级别范围， 16级到23级,默认[1,24]
        defaultMapScaleLevel: 19, // 比例尺级别设置为19级
        imageryProvider: jsmaplight.JSImageryProviderType.VECTOR_TDT,

    });
    console.log("buildId",buildId);
<!--    map.openMapById(buildId,{-->
<!--        focusFloorId: currentFloorId === -99 ? 1 : currentFloorId-->
<!--    });-->

    map.on('loadComplete', function() {
        var floorControl = new jsmaplight.JSFloorControl({
            position: jsmaplight.JSControlPosition.RIGHT_BOTTOM,//控件位置
            showBtnCount: maxFloors,//最大显示楼层按钮数量
            offset: {
                x: 30,
                y: 20
            }//控件偏移位置
        });

        if(!hideFloorControl){
            map.addControl(floorControl);
        }

        if(!hideZoom){
            var zoomControl= new jsmaplight.JSZoomControl({
                        position: jsmaplight.JSControlPosition.LEFT_BOTTOM,//控件位置
                        offset: {
                            x: 30,
                            y: 20
                        }//控件偏移位置
                    });
            map.addControl(zoomControl);
        }

        // addPloygonMarker(1);

        getDomByClass();
        getUp();
        getDown();

        map.on('mapClickNode', event => {
            if(event.properties){
                let sn = event.properties.get("sn");
                let lng = event.properties.get("lng");
                let lat = event.properties.get("lat");
                if(sn && sn.length > 0){
                    console.log("点击了marker");
                    document.location = `js://webview?sn=${sn}&lng=${lng}&lat=${lat}`;
                }
            }
            console.log(event.nodeType);
            console.log(event.node.text);
            console.log(event.eventInfo);
            console.log(event.properties.get("sn"));
            console.log(event.text);
            console.log(event.properties);
            console.log('mapClickNode',JSON.stringify(event.eventInfo));
        });
        onMapLoadCompleted();
    });

    function addPointMarker(event) {
        var pointMarker = new jsmaplight.JSPointMarker({
            color: '#00FF00',
            size: 10,
            position: new jsmaplight.JSPoint(event.eventInfo.coord.x, event.eventInfo.coord.y, event.eventInfo.coord.z),
            floorId: event.eventInfo.coord.floorId,
            outlineColor: '#CD5C5C',
            outlineWidth: 2,
            show: true,
            properties: {
                type: 0
            },
            callback: (node) => {
                console.log(node);
            }
        });
        map.addMarker(pointMarker);
    }


    function addLineMarker(event) {
        var lineMarker = new jsmaplight.JSLineMarker({
            id: 'line',//id
            position: pointList,//坐标几何
            width: 10,//线宽
            floorId: event.eventInfo.coord.floorId,
            color: '#4058ff',//填充颜色
            properties: {
                test: 0
            },//属性设置
            callback: (marker) => {
                console.log(marker);
            }//回调
        });
        map.addMarker(lineMarker);
    }

    function addImageMarker(position,imageIcon) {
        var imagerMarker = new jsmaplight.JSImageMarker({
            id: 'iamgeMareker1',
            image: imageIcon,
            position: position,
            width: 32,
            height: 32,
            floorId: 1,
            show: true,
            properties: {
                name: 'test'
            },
            callback: (node) => {
                console.log(node);
            }
        });
        // if(markerAdded){
        //     map.removeMarker(markerAdded);
        // }
        map.addMarker(imagerMarker);
        // map.flyToMarker(imagerMarker);
        markerAdded = imagerMarker;
    }

    function addImageMarkers(type,positions){
        for(let i = 0; i < positions.length;i++){
                let find = imageMarkList.find((imageMarker)=>{
                var properties = imageMarker.getProperties();
                return properties && properties.get("sn") == positions[i].sn;
            });
            if(type == "summary"){
                if(find){
                    continue;
                }
                addDomMarker(positions[i]);
            }else{
                if(find){
                    // console.log("find-find-find-find");
                    find.content = getDomContent(false,positions[i]);
                    let floorId = positions[i].floorNo.replace("B","-").substring(5);
                    if("2021042800AB" === positions[i].sn){
                        console.log(`切换后的floorId:${floorId}`);
                    }
                    map.updateMarkerPosition(find,{
                        floorId:Number(floorId),
                    position: new jsmaplight.JSPoint(positions[i].lng, positions[i].lat, 0),
                    animate: {
                        duration: 300,
                        update:(coord)=>{
                            // console.log(coord.x + ' , ' + coord.y + ' , ' + coord.z)
                        },
                        complete:()=>{
                            // console.log('updated complete!')
                        }
                    }
});
                }

        }


    }
}

    function addDomMarker(position){
        var imagerMarker = new jsmaplight.JSDomMarker({
                    id: 1,
                    position: new jsmaplight.JSPoint(position.lng, position.lat, 1),
                    floorId: Number(position.floorNo.replace("B","-").substring(5)),//坐标
                    pointerEvents:'none',
                    content: getDomContent(false,position),
                    offset: jsmaplight.JSControlPosition.CENTER,
                    marginOffset: {
                        x: 0,
                        y: 0
                    },
                    properties: {
                        deptId:position.deptId,
                        jobId:position.jobId,
                        type:position.type,
                        name: position.name,
                        sn:position.sn,
                        lng:position.lng,
                        lat:position.lat,
                        icon:position.icon,
                        iconAlarm:position.iconAlarm
                    },//属性设置
                    callback: (node) => {
                        console.log(node);
                    } //回调事件
                });
        // imagerMarker.show = true;
        map.addMarker(imagerMarker);
                imageMarkList.push(imagerMarker);
                if(position.isRealTrack == true){
                    map.trackMarker(imagerMarker,{
                    	range:800
                    });
                }
    }

    function addPloygonMarkers(zoneItems){
        if(zoneItems && Array.isArray(zoneItems)){
            for(let i = 0; i < zoneItems.length; i++){
                let item = zoneItems[i]
                addPloygonMarker(item);
            }
        }

    }

    function addPloygonMarker(item){
        var polygonMarker = new jsmaplight.JSPolygonMarker({
        id: 'polygon',
        position: item.points,
        floorId: item.floorId,
        color: getColorByLevel(item.level),//填充颜色
        strokeColor: getColorByLevel(item.level),//边线颜色
        properties: {
            test: 'polygonTest'
        },
        callback: (marker) => {
            console.log(marker);
        }
    });
        map.addMarker(polygonMarker);
        polygonMarkerList.push(polygonMarker);
    }

    function addCircleMarker(floorId) {
        var circleMarker = new jsmaplight.JSCircleMarker({
            position: singlePoint,
            radius: 15,
            floorId: floorId,
            color:'rgba(0,255,255,0.52)',
            callback: (node) => {
                console.log(node);
            }
        });
        if(circleMarkerAdded){
            map.removeMarker(circleMarkerAdded);
        }
        map.addMarker(circleMarker);
        circleMarkerAdded = circleMarker;
    }

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    function initDrawToolMode1() {
        if (markWay === "addPoint") {
            currentDrawMode = jsmaplight.JSDrawMode.POINT;
        } else if (markWay === "drawPolygon") {
            currentDrawMode = jsmaplight.JSDrawMode.POLYGON;
        }
        drawTool = new jsmaplight.JSDrawTool(map, {
            callback: (geometry) => {
                console.log("-----224------");
                drawTool.clear();
                drawTool.activate(currentDrawMode);
                if (!geometry) {
                    return;
                }
                let floorId = map.focusFloorId;
                let marker, color = '#00FFFF';

                console.log("geometry", geometry);
                console.log("geometry", geometry.x);
                console.log("geometry", geometry.y);
                console.log("geometry", geometry.z);

                if (geometry instanceof jsmaplight.JSPoint) {

                    pointList = [];
                    pointListResult = [];

                    singlePoint = new jsmaplight.JSPoint(geometry.x, geometry.y, geometry.z);


                    // pointList.push(new jsmaplight.JSPoint(geometry.x, geometry.y, geometry.z));

                    singleResult = {
                        "x": geometry.x,
                        "y": geometry.y,
                        "floorId": floorId
                    };

                    // pointListResult.push({
                    //     "x": geometry.x,
                    //     "y": geometry.y,
                    //     "floorId": floorId
                    // });

                    addImageMarker(floorId);
                    // addCircleMarker(floorId);
                }  else if (geometry instanceof jsmaplight.JSPolygon) {
                    console.log(geometry.points);
                    if(geometry && geometry.points && geometry.points.length > 0){
                        for(let i = 0; i < geometry.points.length;i++){
                            let point = geometry.points[i];
                            pointList.push(new jsmaplight.JSPoint(point.x, point.y, 0));
                            pointListResult.push({
                                "x": point.x,
                                "y": point.y,
                                "floorId": floorId
                            });
                        }
                    }
                    console.log("------0-9-00-0-0");
                    addPloygonMarker(floorId);
                    console.log("------0-9-00-0-0");
                }
                // map.addMarker(marker);
            }
        });
    }

    function initDrawToolMode2() {
        console.log("initDrawToolMode2", markWay);
        console.log("initDrawToolMode2", status);
        if (markWay === 'drawPolygon' && status != 1) {
            return;
        }
        if (markWay === "addPoint") {
            drawTool.activate(jsmaplight.JSDrawMode.POINT);
        } else if (markWay === "drawPolygon") {
            drawTool.activate(jsmaplight.JSDrawMode.POLYGON);
        }
    }

    function fetchJson() {
        console.log('fetchjson开始');
        // let url = "http://172.16.10.63:8888/17001/mapConfig.json";
        let url = `${mapServer}${buildId}/mapConfig.json`;
        console.log("fetchJsonUrl", url);
        fetch(url).then(response => response.json()
            .then(data => ({
                data: data,
                status: response.status
            })))
            .then((responseJSON) => {
                const { status, data } = responseJSON;
                console.info("_PARSE");
                console.info(JSON.stringify(responseJSON));
                console.info(responseJSON);
                if (!isEmptyObject(responseJSON.data.root)) {
                    currentFloorId = 0;
                } else {
                    // let first = get_object_first_attribute(responseJSON.data.floors);
                    // if(first && first.length > 0){
                    //     currentFloorId = Number(first.substring(1));
                    // }
                    currentFloorId = 1;
                }
                map.openMapById(buildId,{
                    focusFloorId: currentFloorId === -99 ? 1 : currentFloorId
                });
                return responseJSON;
            })
            .catch((e) => {
                console.error(e);
                document.getElementById('id_tip').style.display = "flex";
                onReadConfigurationFailed();
            })
    }

    function xxx(type,value){
        addImageMarkers(type,value);
    }

    function addLineMarkers(xPoints){
       map.removeAllMarker();
       add(xPoints);
    }

            //添加标注
            function add(xPoints) {
                var firstPosition;
                var lastPosition;
                    if(xPoints && xPoints.length > 0){
                        var first = xPoints[0];
                        var last = xPoints[xPoints.length -1];
                        console.log("第一个");
                        console.log(JSON.stringify(first));
                        firstPosition = new jsmaplight.JSPoint(first.x, first.y, 1);
                        lastPosition = new jsmaplight.JSPoint(last.x, last.y, 1);
                    }
                    var lineMarker = new jsmaplight.JSLineMarker({
                        id: 1,//id
                        floorId:1,
                        position: xPoints,//坐标几何
                        width: 2,//线宽
                        color: 'rgb(255,165,0)',//填充颜色
                        properties: {
                            test: 0
                        },//属性设置
                        callback: (marker) => {
                            console.log(marker);
                        }//回调
                    });
                    map.addMarker(lineMarker);
                    if(firstPosition){
                        addImageMarker(firstPosition,'./image/point_start.png');
                    }
                    if(lastPosition){
                        addImageMarker(lastPosition,'./image/point_end.png');
                    }
                    map.flyToMarker(lineMarker);
                    //创建option标签
                    // var option = document.createElement('option');
                    // option.value = index+1;
                    // option.innerText = `第${index+1}个线标注`;
                    // fragment.appendChild(option);
                    // markerArr.push(lineMarker);
                // })
            }

            function setFloorId(targetFloorId){
                console.log("targetFloorId = " + targetFloorId);
                map.focusFloorId = targetFloorId;
            }

            function setChosenDeptId(deptId){
                if(deptId == -1){
                    chosenDeptId = null;
                }else{
                    chosenDeptId = deptId;
                }
            }

            //0 平面 1 卫星
            function setChosenMapType(type){
                console.log("设置地图类型");
                console.log(type);
                if(type == chosenMapType){
                    return;
                }
                chosenMapType = type;
                if(chosenMapType == 1){
                    console.log("IMAGE_TDT");
                    map.imageryProvider = jsmaplight.JSImageryProviderType.IMAGE_TDT
                }else if(chosenMapType == 0){
                    console.log("VECTOR_TDT");
                    map.imageryProvider = jsmaplight.JSImageryProviderType.VECTOR_TDT
                }
            }

            function getDomContent(isTarget,position){
                if(position.type == 2 || position.type == 4){
                    return `<div class="content-container"><div class="dom_title">${position.name}
                    </div><img class=${isTarget?"dom_icon2":"dom_icon4"} src=${position.isAlarm ? position.iconAlarm : position.icon}></img></div>`;
                }else{
                    return `<div class="content-container"><div class="dom_title">${position.name}</div><img class=${isTarget?"dom_icon":"dom_icon3"} src=${position.isAlarm ? position.iconAlarm : position.icon}></img></div>`;
                }

            }

            function setDomTitleShowFlag(flag){
                console.log("flag = " + flag);
                domTitleShowFlag = flag;
                let show = "dom_title";
                let dom = document.getElementsByClassName(show);
                if (dom && dom.length > 0) {
                    for(let i = 0;i < dom.length;i++){
                        dom[i].style.display = flag ? "block" : "none";
                    }

                }
            }

            function toggoleRiskZone(showFlag){
                console.log(`hideRiskZone`);
                console.log(showFlag);
                if(polygonMarkerList!=null && polygonMarkerList.length > 0){
                    for (var i = 0; i < polygonMarkerList.length; i++) {
                        let marker = polygonMarkerList[i];
                        marker.show = (showFlag != false);
                    }
                }
            }

            function addRiskZone(riskZoneItems){
                if(polygonMarkerList && polygonMarkerList.length > 0){
                    toggoleRiskZone(true);
                    return;
                }
                addPloygonMarkers(riskZoneItems);
            }

            function setChosenJobIds(ids){
                chosenJobIds = ids;
                console.log(chosenJobIds);
            }

            function setShowStatusList(status){
                chosenStatus = [];
                console.log("状态");
                console.log(Array.isArray(status));
                if(status && status.length  == 3){
                    console.log("是3个");
                    if(status[1] == true){ //1 3 5 对应的是内部 外部员工 承包商之类的
                        chosenStatus.push(1);
                        chosenStatus.push(3);
                        chosenStatus.push(5);
                    }
                    if(status[2] == true){
                        chosenStatus.push(2);
                        chosenStatus.push(4);
                    }
                }
                // chosenStatus = status;
                // if(status && status.length > 0){
                //  chosenStatus = status.split(",");
                // }
                console.log(chosenStatus);
            }

            function setRealTrackSn(sn){
                console.log("web页面setRealTrackSn");
                console.log(sn);
                console.log(chosenRealTrackSn);
                if(sn != chosenRealTrackSn){
                    chosenRealTrackSn = sn;
                    if(chosenRealTrackSn && chosenRealTrackSn.length > 0){
                        console.log("查找:"+chosenRealTrackSn);
                        let find = imageMarkList.find((imageMarker)=>{
                        var properties = imageMarker.getProperties();
                            return properties && properties.get("sn") == chosenRealTrackSn;
                        });
                        if(find){
                            console.log("找到了--trackMarker" + find.floorId);
                            map.trackMarker(find,{
                            	range:800
                            })
                        }
                    }else{
                        map.cancelTrack();
                    }

                    doFilter();
                }
            }

            function doFilter(){
                console.log("走到了doFilter");
                console.log(imageMarkList.length);
                for(let i = 0; i < imageMarkList.length;i++){
                    let marker = imageMarkList[i];
                    var properties = marker.getProperties();
                    var type = properties.get("type");
                    var deptId = properties.get("deptId");
                    var jobId = properties.get("jobId");
                    var sn = properties.get("sn");
                    var showFlag = true;
                    console.log("doFilter--");
                    if(showFlag){
                        if(chosenRealTrackSn){
                            showFlag = (chosenRealTrackSn == sn);
                        }
                    }
                    if(showFlag){
                        console.log("chosenStatus:"+chosenStatus);
                        console.log(type);
                        if(chosenStatus && chosenStatus.length > 0){
                            showFlag = chosenStatus.indexOf(type) > -1;
                        }else{
                            showFlag = false;
                        }
                    }
                    if(showFlag){
                        if(chosenDeptId && chosenDeptId != -1){
                            showFlag = (deptId == chosenDeptId);
                        }
                    }
                    if(showFlag){
                        console.log("doFilter");
                        console.log(chosenJobIds);
                        console.log(jobId);
                        if(chosenJobIds && chosenJobIds.length > 0){
                            showFlag = chosenJobIds.indexOf(jobId) > -1;
                        }
                    }
                    marker.show = showFlag;
                }
            }

            function chooseTarget(targetSn){
                for(let i = 0; i < imageMarkList.length;i++){
                    let marker = imageMarkList[i];
                    var properties = marker.getProperties();
                    var sn = properties.get("sn");
                    var showFlag = true;
                    if(!marker.show){
                        continue;
                    }
                    if(targetSn == sn){
                        marker.content = getDomContent
                    }
                }
            }

                function getDomByClass() {
        let xxx = "jsmap2d-bar";
        let dom = document.getElementsByClassName(xxx);
        console.log("==~~==~~==~~==~~==~~==~~==~~==~~==~~");
        console.log(dom);
        if (dom && dom.length > 0) {
            let originHeight = dom[0].style.height;
            console.log("originHeight",dom[0].offsetHeight);
            // if(isArrowExist()){
            //     dom[0].style.height = 90 * maxFloors + "px";
            // }else{
            //     dom[0].style.height = dom[0].offsetHeight * 1 + "px";
            // }
            dom[0].style.background = "#f3f2f3";
            console.log("==~~==~~==~~==~~==~~==~~==~~==~~==~~");
        }

    }

                function getUp() {
        let x = "jsmap2d-up-arrow";
        let dom = document.getElementsByClassName(x);
        console.log("==~~==~~==~~==~~==~~==~~==~~==~~==~~");
        console.log(dom);
        if(dom && dom.length > 0){
            dom[0].style.display = "flex";
            dom[0].style.alignItems = "center";
            dom[0].style.justifyContent = "center";
            dom[0].style.paddingBottom = "7px";
            dom[0].style.height = "20px";
            // dom[0].style.background = "red";
            // dom[0].style.fontSize = "15px";
            dom[0].style.fontWeight = "bold";
            dom[0].text = "︿";
        }
    }

        function getDown() {
        let x = "jsmap2d-down-arrow";
        let dom = document.getElementsByClassName(x);
        console.log("==~~==~~==~~==~~==~~==~~==~~==~~==~~");
        console.log(dom);
        if(dom && dom.length > 0){
            dom[0].style.display = "flex";
            dom[0].style.alignItems = "center";
            dom[0].style.justifyContent = "center";
            dom[0].style.paddingTop = "7px";
            dom[0].style.height = "20px";
            // dom[0].style.background = "red";
            // dom[0].style.fontSize = "15px";
            dom[0].style.fontWeight = "bold";

            dom[0].text = "﹀";
        }
    }

    function getColorByLevel(level){
        let color = ''
        switch (level) {
            case '重大风险':
                color = 'rgba(255,0,0,0.6)';
                break;
            case '较大风险':
                color = 'rgba(255,125,0,0.6)';
                break;
            case '一般风险':
                color = 'rgba(255,255,0,0.6)';
                break;
            case '较低风险':
            default:
                color = 'rgba(0,0,255,0.6)';
                break;
        }
        return color
    }

    function clearAllMapMarkers(){
        map.removeAllMarker();
    }

    function onMapLoadCompleted(){
        document.location = `js://onMapLoadCompleted`;
    }

    function onReadConfigurationFailed(){
        document.location = `js://onReadConfigurationFailed`;
    }

    function get_object_first_attribute(data){
        for (let key in data){
            return key;
        }

    }

    function isEmptyObject(obj){
        for(let value in obj){
            return false;
        }
        return true;
    }
</script>

<style type="text/css">
    html,
    body,
    #mapContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

/*        .jsmap2d-bar a, .jsmap2d-bar a:hover {
      width: 51px !important;
      height: 50px !important;
      line-height: 50px !important;
    }
    .jsmap2d-up-arrow,.jsmap2d-down-arrow {
      height: 30px !important;
    }
    .leaflet-touch .leaflet-bar a {
      width: 50px !important;
      height: 50px !important;
      line-height: 50px !important;
      text-align: center;
    }
    .jsmap2d-svgPath-svg {
      top: 25% !important;
      left: 25% !important;
      text-align: center;
    }*/

    .container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: flex;
        background: red;
    }

    .operation_layout {
        width: 100%;
        height: 40px;
        position: absolute;
        bottom: 20px;
        margin-bottom: 10px;
        margin-left: 150px;
        display: none;
        align-items: center;
        justify-content: left;
        align-content: center;
        z-index: 999 !important;
    }

    .btn {
        width: 100px;
        height: 40px;
        margin-left: 20px;
        background: #0b6bb6;
        /*opacity: 0.65;*/
        color: white;
        font-size: 12px;
        line-height: 40px;
        border-radius: 12px;
        align-content: center;
        text-align: center;
    }

    .back {
        position: absolute;
        width: 50px;
        height: 50px;
        justify-content: center;
        align-items: center;
        display: flex;
        margin-left: 40px;
        margin-top: 40px;
        font-size: small;
        background: #cccccc;
        opacity: 0.9;
        z-index: 999 !important;
        border-radius: 50%;
    }

    .input {
        position: absolute;
        width: 150px;
        height: 50px;
        justify-content: center;
        align-items: center;
        display: none;
        margin-left: 180px;
        background: #cccccc;
        margin-top: 40px;
        font-size: small;
        opacity: 0.9;
        z-index: 999 !important;
    }

    .back_img{
        width: 14px;
        height: 23px;
    }

    .back h1 {
        left: 50%;
        top: 50%;
    }

    /*.jsmap2d-svgPath-svg {*/
    /*    position: absolute;*/
    /*    top: 28px;*/
    /*    left: 28px;*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    overflow: hidden*/
    /*}*/


    /* element.style {
    }
    .leaflet-touch .leaflet-bar a:first-child {
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
    } */

    /*.leaflet-control-zoom-in, .leaflet-control-zoom-out {*/
    /*    font: 700 28px Lucida Console, Monaco, monospace;*/
    /*    font-size: 150px;*/
    /*    text-indent: 1px*/
    /*}*/

    /*.leaflet-touch .leaflet-bar a {*/
    /*    width: 93px;*/
    /*    height: 90px;*/
    /*    line-height: 90px;*/
    /*    font-weight: 900;*/
    /*    font-size: xx-large;*/
    /*    align-content: center;*/
    /*}*/


    .jsmap2d-bar a, .jsmap2d-bar a:hover {
        background-color: #aaeeffba;
        border-bottom: 1px solid rgba(26, 86, 255, .42);
        /*width: 93px;*/
        /*height: 90px;*/
        /*line-height: 90px;*/
        /*font-weight: 900;*/
        display: block;
        text-align: center;
        text-decoration: none;
        /*font-size: large;*/
        /*color: #000*/
    }

    .tip {
        display: none;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
    }

    .tip-content{
        font-size: 15px;
        font-weight: bold;
    }

    .radius-label{
        font-size: 25px
    }
    .radius{
        width: 50px;
        height: 30px;
        font-size: 25px
    }

    .content-container{
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        background-color: green;
    }

    .dom_icon{
        width: 30px;
        height:30px;
    }

    .dom_icon2{
        width: 40px;
        height:40px;
    }

    .dom_icon3{
        width: 30px;
        height:30px;
        /*background-color: red;*/
    }

    .dom_icon4{
        width: 40px;
        height:40px;
        /*background-color: red;*/
    }

    .dom_title{
       /* width: 80px;*/
        /*display: inline-block;*/
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 3px;
        padding-bottom: 3px;
        text-align: center;
        color: rgba(255,255,255,1);
        background-color: rgba(0, 0, 0, 0.65);
        border-radius: 15px;
        display: block;

    }

    .show{
        display: block;
    }
</style>